<template>
    <div class="page-member-index box_bg_gray" id="App">
        <div class="header-wrap box_bg_gray"><!-- box_bg_gray -->
            <div class="bg"></div>
            <div class="header color-black">
                <div class="inner" style="width:84%;" v-if="userBasicInfo && userBasicInfo.avatar">
                    <div class="left" style="width:100%;">
                        <div class="avatar">
                            <img class="border-round" :src="userBasicInfo.avatar" mode="aspectFill" />
                        </div>
                        <div class="info user-info color-black" style="width:74%;">
                            <div class="name hidden-text text-huge color-black" style="font-size:32rpx;font-weight:600;">{{userBasicInfo.name ? userBasicInfo.name : ''}}</div>
                            <div class="level text_overflow color-black" style="font-size:30rpx;font-weight:600;">{{levelList[userBasicInfo.level]}}</div>
                            <div class="level text_overflow color-black" style="font-size:30rpx;font-weight:600;">{{userBasicInfo.position || ''}}</div>
                            <div style="font-size:20rpx;font-weight:600;" v-if="userBasicInfo.invite_code && userBasicInfo.level === 3 && service && service.can_apply_partner == '1'" v-clipboard="userBasicInfo ? userBasicInfo.invite_code : ''">
                                <span class="copy-btn text_overflow color-black" style="font-size:30rpx;">邀请码</span>
                                {{userBasicInfo.invite_code}}
                            </div>
                        </div>
                    </div>
                    <!-- <div class="info unlock" v-if="userBasicInfo.level !== 0">
                        <span>
                            <span class="text-banner">{{accountCurrency}}</span>
                            <span v-if="account > 1000000" class="tips">万</span>
                            <span v-else class="tips">元</span>
                        </span>
                        <span class="text-normal">待提现</span>
                    </div> -->
                </div>
                <div class="inner aligin-cneter" v-else>
                    <div class="left">
                        <div class="avatar">
                            <img class="border-round" src="/static/images/default_avatar.png" mode="aspectFill" />
                        </div>
                        <div class="info user-info color-black">
                            <div class="name text-huge color-black">用户未授权</div>
                        </div>
                    </div>
                    <button
                        class="btn btn-mobile btn-large btn-white btn-round btn-login"
                        @click="onClickLogin">
                        点击登录
                    </button>
                </div>
            </div>
        </div>
        <!-- <div class="banner" v-if="userBasicInfo.level === 0">
            <img src="../../static/images/banner.png" mode="aspectFill" />
            <div class="btn btn-mobile btn-red btn-large btn-block" @click="onClickPartner">申请成为城市合伙人</div>
        </div> -->
        <div class="banner box_bg_gray" v-if="userBasicInfo.level >= 1"> <!-- box_bg_gray -->
            <div class="shop-list" v-if="userBasicInfo.level === 1">
                <div class="inner text-normal box_bg_white">
                    <div class="title font-bold padding_left_15">所属商家</div>
                    <div class="item padding_left_30" v-for="(item, index) in memberShopList" :key="index">{{item.shop}}</div>
                </div>
            </div>
            <div class="shop-list" v-if="userBasicInfo.level === 3">
                <div class="inner text-normal box_bg_white">
                    <div class="title font-bold padding_left_15">所属商家</div>
                    <div class="item padding_left_30" v-for="(item, index) in userBasicInfo.shop" :key="index">{{item.name}}</div>
                </div>
            </div>
            <!-- userBasicInfo.level >= 1  -->
            <div class="my_tabs text-normal box_bg_white" v-if="userBasicInfo.level >= 0">
                <div class="item border_right_gray"  @click="changeTabsItem('init')">
                    <div class="money tab_item_no" :class="tabs_item_active == 'init'?'tab_item_active':''">
                        <span class="item_text_large font-bold" >{{userBasicInfo.order.init}}</span>
                        <span v-if="account > 1000000" class="item_text_small">万</span>
                        <span v-else class="item_text_small">元</span>
                        <!-- <span class="item_text_small">元</span> -->
                    </div>
                    <div class="text" style="color:#000000;">待审核</div>
                </div>
                <div class="item border_right_gray"  @click="changeTabsItem('issued')">
                    <div class="money tab_item_no" :class="tabs_item_active == 'issued'?'tab_item_active':''">
                        <span class="item_text_large font-bold">{{userBasicInfo.order.issued}}</span>
                        <span v-if="account > 1000000" class="item_text_small">万</span>
                        <span v-else class="item_text_small">元</span>
                        <!-- <span class="item_text_small">元</span> -->
                    </div>
                    <div class="text" style="color:#000000;">待提现</div>
                </div>
                <div class="item border_right_gray"  @click="changeTabsItem('ing')">
                    <div class="money tab_item_no" :class="tabs_item_active == 'ing'?'tab_item_active':''">
                        <span class="item_text_large font-bold">{{userBasicInfo.order.ing}}</span>
                        <span v-if="account > 1000000" class="item_text_small">万</span>
                        <span v-else class="item_text_small">元</span>
                        <!-- <span class="item_text_small">元</span> -->
                    </div>
                    <div class="text" style="color:#000000;">提现中</div>
                </div>
                <div class="item border_right_gray"  @click="changeTabsItem('total')">
                    <div class="money tab_item_no" :class="tabs_item_active == 'total'?'tab_item_active':''">
                        <span class="item_text_large font-bold">{{userBasicInfo.order.total}}</span>
                        <span v-if="account > 1000000" class="item_text_small">万</span>
                        <span v-else class="item_text_small">元</span>
                        <!-- <span class="item_text_small">元</span> -->
                    </div>
                    <div class="text" style="color:#000000;">累计提现</div>
                </div>
                <div class="item" @click="onClickUserAccount">
                    <div class="icon">&#xe655;</div>
                    <div class="text">我的账户</div>
                </div>
            </div>
            <!-- <div class="visitor font-bold clearfix" @click="toPartnerLockRecord" v-if="userBasicInfo.level === 1">
                <div class="col col-4">
                    <div>
                        <span class="number">{{lockCurrency}}</span>
                        <span v-if="lock > 1000000" class="tips">万</span>
                    </div>
                    <div class="tips">锁定总金额<span class="icon">&#xe770;</span></div>
                </div>
                <div class="col col-4">
                    <div>
                        <span class="number">{{unlockCurrency}}</span>
                        <span v-if="unlock > 1000000" class="tips">万</span>
                    </div>
                    <div class="tips">解锁金额<span class="icon">&#xe770;</span></div>
                </div>
                <div class="col col-4" @click.stop="onClickUserAccount">
                    <div>
                        <span class="number">{{accountCurrency}}</span>
                        <span v-if="account > 1000000" class="tips">万</span>
                    </div>
                    <div class="tips">待提现<span class="icon">&#xe770;</span></div>
                </div>
            </div> -->
            <!-- 返利会员 -->
            <div class="visitor font-bold clearfix box_bg_white" @click="toPartnerLockRecord" v-if="userBasicInfo.level === 1">
                <div class="col col-6 border_right_gray box_sizing">
                    <div>
                        <span class="number">{{lockCurrency}}</span>
                        <span v-if="lock > 1000000" class="tips">万</span>
                    </div>
                    <div class="tips text_color_black">锁定总金额</div>
                </div>
                <div class="col col-6">
                    <div>
                        <span class="number">{{unlockCurrency}}</span>
                        <span v-if="unlock > 1000000" class="tips">万</span>
                    </div>
                    <div class="tips text_color_black">解锁金额</div>
                </div>
            </div>

            <div class="visitor font-bold clearfix box_bg_white" style="margin-top:20rpx;" v-if="invitationStat">
                <block v-if="userBasicInfo.level !== 1">
                    <!-- <div class="col col-4">
                        <div class="number">{{invitationStat.invite_number}}</div>
                        <div class="tips">邀请记录</div>
                    </div>
                    <div class="col col-4">
                        <div class="number">{{invitationStat.no_deal}}</div>
                        <div class="tips">还未成交</div>
                    </div> -->
                </block>
                <div>
                    <div class="number">{{invitationStat.order_number}}</div>
                    <div class="tips color-red">成交订单</div>
                </div>
            </div>
            <!-- 返利会员 -金额明细 -->
            <!-- <div class="account-detail" @click="onClickUserAccount" v-if="userBasicInfo.level === 1">
                <div class="title text-huge font-bold clearfix">
                    <span class="fl">金额明细</span>
                    <span class="icon fr">&#xe770;</span>
                </div>
                <block v-if="userBasicInfo.level === 1 && rebateDetailListCurrency.length">
                    <div class="item" v-for="(item, index) in rebateDetailListCurrency" :key="index">
                        <div class="inner-box" style="width: 66%;">
                            <div class="avatar">
                                <img class="border-round" :src="item.avatar" mode="aspectFill" />
                            </div>
                            <div class="info" style="width: 70%;">
                                <div class="name text-huge">{{item.order_name}}</div>
                                <div class="rank grey-color text-small">{{item.title}}</div>
                                <div class="rank grey-color text-small" v-if="item.shop">{{item.shop}}</div>
                            </div>
                        </div>
                        <div class="count-box text-right">
                            <div class="count text-huge color-red text-right">
                                +{{item.money}}
                            </div>
                            <div class="time grey-color text-small">
                                {{item.created_at}}
                            </div>
                        </div>
                    </div>
                </block>
                <ListEmpty v-else />
            </div> -->
        </div>



        <div class="banner" v-if="userBasicInfo.level === 2 || userBasicInfo.level === 3">
            <div class="rebate-box rank-box account-detail box_bg_white" style="width:100%;margin:0rpx">
                <div class="title huge-text font-bold text-center" style="color:#EF6A6F;font-weight:600;" @click="onClickUserAccount">可提现明细</div>
                <!-- <div class="border-bottom"></div> -->
                <div class="list" style="border:none;width:94%;" @click="onClickUserAccount">
                    <block v-if="rebateDetailListCurrency.length">
                        <div class="item position-relative border_top_pink border_bottom_pink" style="padding:10rpx;" v-for="(item, index) in rebateDetailListCurrency" :key="index">
                            <div class="inner-box" style="width:100%;">
                                <div class="avatar">
                                    <img class="border-round" :src="item.avatar" mode="aspectFill" />
                                </div>
                                <div class="info" style="width:81%;">
                                    <div class="name text-normal" >
                                        <div class="count text-normal color-yellow fr">
                                            +{{item.money}}
                                        </div>
                                        <div class="hidden-text">
                                            {{item.order_name}}<span v-if="item.referrer"> 推荐人:{{item.referrer}}</span>
                                        </div>
                                    </div>
                                    <div class="rank grey-color text-small">
                                        <span class="fr">
                                            {{item.created_at}}
                                        </span>
                                        <div class="hidden-text">
                                            {{item.title}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </block>
                    <ListEmpty v-else />
                </div>
            </div>
        </div>
        <!-- 注册会员显示我的账户 -->
        <div class="banner box_bg_gray" v-if="userBasicInfo.level == 0"> <!-- box_bg_gray -->
            <div class="my_tabs text-normal box_bg_white">
                <div class="item border_right_gray"  @click="changeTabsItem('init')">
                    <div class="money tab_item_no" :class="tabs_item_active == 'init'?'tab_item_active':''">
                        <span class="item_text_large font-bold" >{{userBasicInfo.order.init}}</span>
                        <span v-if="account > 1000000" class="item_text_small">万</span>
                        <span v-else class="item_text_small">元</span>
                        <!-- <span class="item_text_small">元</span> -->
                    </div>
                    <div class="text" style="color:#000000;">待审核</div>
                </div>
                <div class="item border_right_gray"  @click="changeTabsItem('issued')">
                    <div class="money tab_item_no" :class="tabs_item_active == 'issued'?'tab_item_active':''">
                        <span class="item_text_large font-bold">{{userBasicInfo.order.issued}}</span>
                        <span v-if="account > 1000000" class="item_text_small">万</span>
                        <span v-else class="item_text_small">元</span>
                        <!-- <span class="item_text_small">元</span> -->
                    </div>
                    <div class="text" style="color:#000000;">待提现</div>
                </div>
                <div class="item border_right_gray"  @click="changeTabsItem('ing')">
                    <div class="money tab_item_no" :class="tabs_item_active == 'ing'?'tab_item_active':''">
                        <span class="item_text_large font-bold">{{userBasicInfo.order.ing}}</span>
                        <span v-if="account > 1000000" class="item_text_small">万</span>
                        <span v-else class="item_text_small">元</span>
                        <!-- <span class="item_text_small">元</span> -->
                    </div>
                    <div class="text" style="color:#000000;">提现中</div>
                </div>
                <div class="item border_right_gray"  @click="changeTabsItem('total')">
                    <div class="money tab_item_no" :class="tabs_item_active == 'total'?'tab_item_active':''">
                        <span class="item_text_large font-bold">{{userBasicInfo.order.total}}</span>
                        <span v-if="account > 1000000" class="item_text_small">万</span>
                        <span v-else class="item_text_small">元</span>
                        <!-- <span class="item_text_small">元</span> -->
                    </div>
                    <div class="text" style="color:#000000;">累计提现</div>
                </div>
                <div class="item" @click="onClickUserAccount">
                    <div class="icon">&#xe655;</div>
                    <div class="text">我的账户</div>
                </div>
            </div>
        </div>

        <!-- v-if="userBasicInfo.level != 0" -->
        <div class="tabs text-normal box_bg_white" style="padding:10rpx 20rpx;">
            <!-- <div class="item" @click="toPoster" v-if="userBasicInfo.level === 1">
                <div class="icon">&#xe69c;</div>
                <div class="text">我的海报</div>
            </div> -->
            <!-- <div class="item" @click="onClickUserAccount" v-if="userBasicInfo.level >= 1">
                <div class="icon">&#xe8a5;</div>
                <div class="text">我的账户</div>
            </div> -->
            <div class="item" v-if="userBasicInfo.level == 2" @click="toService">
                <div class="icon">&#xe64d;</div>
                <div class="text">专属客服</div>
            </div>
            <div class="item" @click="showUnlockDesc" v-if="userBasicInfo.level === 1">
                <div class="icon">&#xe655;</div>
                <div class="text">解锁说明</div>
            </div>
            <!-- <div class="item" v-if="userBasicInfo.level === 1" @click="toUserInvite">
                <div class="icon">&#xe614;</div>
                <div class="text">我的邀请</div>
            </div> -->
            <!-- <div class="item" v-if="userBasicInfo.level === 1">
                <div class="icon">&#xe831;</div>
                <div class="text">赚钱攻略</div>
            </div> -->
            <!-- <div class="item" v-if="userBasicInfo.level === 1" @click="onClickPartner">
                <div class="icon">&#xe80c;</div>
                <div class="text">身份升级</div>
            </div> -->
            <div class="item" v-if="userBasicInfo.level >= 1" @click="onClickRecommendOrder">
                <div class="icon">&#xe62b;</div>
                <div class="text">推荐订单</div>
            </div>
            <div class="item" @click="toMyTeam" v-if="userBasicInfo.level === 3">
                <div class="icon">&#xe605;</div>
                <div class="text">我的团队</div>
            </div>
            <div class="item" v-if="userBasicInfo.level != 3" @click="onClickFeature('complaint')">
                <div class="icon">&#xe6b9;</div>
                <div class="text">我要投诉</div>
            </div>
            <div class="item" v-if="userBasicInfo.level >= 1" @click="onClickFeature('rebate')">
                <div class="icon">&#xe668;</div>
                <div class="text">返利明细</div>
            </div>
            <div class="item"  @click="onClickManage('manage')" v-if="userBasicInfo.level === 3">
                <!-- <div class="icon"> -->
                    <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/15@2x.png" class="icon_img" alt="" />
                <!-- </div> -->
                <div class="text">在线管理</div>
            </div>

        </div>

        <!-- 充值余额 -->
        <div class="my_tabs2 text-normal box_bg_white" style="padding:10rpx 20rpx;box-sizing:border-box;" v-if="userBasicInfo.level >= 0">
            <div class="item_3 border_right_gray" @click="onClickRecharge('manage')">
                <div class="money color-red">
                    <span class="item_text_large font-bold">{{userBasicInfo.balance?userBasicInfo.balance:'0.00'}}</span>
                    <span class="item_text_small">元</span>
                </div>
                <div class="text">充值余额</div>
            </div>
            <div class="item_3 border_right_gray" @click="onClickRechargeRecord('manage')" v-if="userBasicInfo.level >= 0">
                <!-- <div class="icon">&#xe668;</div> -->
                <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/rechage_record.png" class="icon_img" style="margin-bottom: -6rpx;" alt="" />
                <div class="text">充值记录</div>
            </div>
            <div class="item_3" v-if="userBasicInfo.level >= 0" @click="onClickConsume('manage')">
                <!-- <div class="icon"> -->
                    <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/record.png" class="icon_img" style="margin-bottom: -6rpx;" alt="" />
                <!-- </div> -->
                <div class="text">消费记录</div>
            </div>
        </div>
        <div class="staff-rank-wrap" v-if="(userBasicInfo.level === 2 || userBasicInfo.level === 3) && rankNavs.length">
            <div class="title huge-text text-center">{{userBasicInfo.level === 3 ? '商家职员内部排行' : '城市合伙人排行'}}</div>
            <div class="rank-box">
                <CommonNav v-model="rankNav" :navs="rankNavs"></CommonNav>
                <div class="border-bottom"></div>
                <div v-if="rankNav == '选择门店'" style="padding-bottom: 80rpx;">
                    <!-- 搜索门店 -->
                    <div class="searchBox_mendian">
                        <div style="z-index:0;">
                            <van-search v-model="search" placeholder="商家名称" />
                        </div>
                        <div class="searcResultBox" v-show="searchBoxState && showSelect">
                            <template v-if="searchNameList">
                                <div class="searcResultBox_item" v-for="(searItem,searIndex) in searchNameList" :key="searIndex" @click="onSelectMendianName(searItem.name)">{{searItem.name}}</div>
                            </template>
                            <template v-else>
                                <div class="mall-index__empty">暂无内容</div>
                            </template>
                        </div>
                    </div>

                    <div style="width:98%;">
                        <div class="date-select-box">
                            <!--  -->
                            <ZbSelect v-model="selectedDateType" type="mini" :options="dateTypeOptions" :hasBr="true" default-br="#101010" default-color="#101010" selected-color="#FFFFFF" selected-br="#f4051a" selected-bg="#f4051a" />
                            <span class="pickerSelect">
                                <wx-picker :value="dataIndex" :range="dataArray" @change="onStartDateChange">
                                    <div class="picker-border-box fl">
                                        {{dataArray[selectActive]}}
                                    </div>
                                </wx-picker>
                            </span>
                        </div>
                    </div>
                    <block v-if="rankList.length">
                        <block v-for="(item, index) in rankList" :key="index" >
                            <div class="rank-item text-huge position-relative after-line">
                                <div class="info">
                                    <div class="avatar">
                                        <img :src="item.avatar" v-if="item.avatar" mode="aspectFill" />
                                        <img class="border-round" v-else src="/static/images/default_avatar.png" mode="aspectFill" />
                                    </div>
                                    <div class="good-info">
                                        <div class="name">{{item.nickname ? item.nickname : '用户未授权'}}</div>
                                        <div class="rank grey-color small-text">第{{index + 1}}名</div>
                                        <!-- <div class="rank blue-color small-text">{{item.shop_name}}</div> -->
                                    </div>
                                </div>
                                <div class="price red-color">{{currency(item.score) + '元'}}</div>
                            </div>
                        </block>
                    </block>
                    <ListEmpty v-else />
                </div>
                <div v-else>
                    <div class="date-select-box">
                        <ZbSelect v-model="selectedDateType" type="mini" :options="dateTypeOptions" :hasBr="true" default-br="#101010" default-color="#101010" selected-color="#FFFFFF" selected-br="#f4051a" selected-bg="#f4051a" />
                        <span class="pickerSelect">
                            <wx-picker :value="dataIndex" :range="dataArray" @change="onStartDateChange">
                                <div class="picker-border-box fl">
                                    {{dataArray[selectActive]}}
                                </div>
                            </wx-picker>
                        </span>
                    </div>
                    <block v-if="rankSelfFormat">
                        <div class="rank-item text-huge position-relative after-line">
                            <div class="info">
                                <div class="avatar">
                                    <img :src="userBasicInfo.avatar" v-if="userBasicInfo.avatar" mode="aspectFill" />
                                    <img class="border-round" v-else src="/static/images/default_avatar.png" mode="aspectFill" />
                                </div>
                                <div class="good-info">
                                    <div class="name">{{userBasicInfo.nickname ? userBasicInfo.nickname : '用户未授权'}}</div>
                                    <div class="rank grey-color small-text">第{{rankSelfFormat.rank}}名</div>
                                </div>
                            </div>
                            <div class="price red-color">{{rankSelfFormat.score}}元</div>
                        </div>
                    </block>
                    <block v-if="rankList.length">
                        <block v-for="(item, index) in rankList" :key="index">
                            <div class="rank-item text-huge position-relative after-line">
                                <div class="info">
                                    <div class="avatar">
                                        <img :src="item.avatar" v-if="item.avatar" mode="aspectFill" />
                                        <img class="border-round" v-else src="/static/images/default_avatar.png" mode="aspectFill" />
                                    </div>
                                    <div class="good-info">
                                        <div class="name">{{item.nickname ? item.nickname : '用户未授权'}}</div>
                                        <div class="rank grey-color small-text">第{{index + 1}}名</div>
                                    </div>
                                </div>
                                <div class="price red-color">{{isCountRank ? item.score + '单' : currency(item.score) + '元'}}</div>
                            </div>
                        </block>
                    </block>
                    <ListEmpty v-else />
                </div>


            </div>
        </div>
        <div class="rank-box rank2_box" style="padding-bottom: 90rpx;" :class="{ 'mr-top-60': userBasicInfo.level === 2 }" v-if="userBasicInfo.level === 1">
            <!-- <div class="text-huge font-bold">
                <span class="red-border-bottom">解锁排行</span>
            </div> -->
            <!-- 修改后的可切换 -->
            <div class="text-huge font-bold selecItemThisBox">
                <span class="selecItemThis" :class="selectThisItem == 'unlockWrap'?'selecItemThis_bottom_red':''" @click="checkedRank('unlockWrap')">解锁排行</span>
                <span class="selecItemThis" :class="selectThisItem == 'selectMendian'?'selecItemThis_bottom_red':''" @click="checkedRank('selectMendian')">选择门店</span>
            </div>
            <!-- 解锁排行 -->
            <template v-if="selectThisItem == 'unlockWrap'">
                <div class="date-select-box" style="height:50rpx;padding:6rpx 0rpx;">
                    <ZbSelect v-model="lockSelectedDateType" type="mini" :options="lockdateTypeOptions" :hasBr="true" default-br="#101010" default-color="#101010" selected-color="#FFFFFF" selected-br="#f4051a" selected-bg="#f4051a" />
                    <!-- <ZbSelect v-model="lockselectedDateType" style="float:right;" type="mini" :options="lockdateTypeOptions" :hasBr="true" default-br="#101010" default-color="#101010" selected-color="#FFFFFF" selected-br="#f4051a" selected-bg="#f4051a" /> -->
                    <span class="pickerSelect">
                        <wx-picker :value="lockdataIndex" :range="lockdataArray" @change="lockonStartDateChange">
                            <div class="picker-border-box fl">
                                {{lockdataArray[lockselectActive]}}
                            </div>
                        </wx-picker>
                    </span>
                </div>

                <div class="list" v-if="unlockWrap && unlockWrap.list.length">
                    <div class="item position-relative before-line" v-for="(item, index) in unlockListCurrency" :key="index">
                        <div class="inner-box">
                            <div class="avatar" style="width:45px;height:45px;">
                                <img class="border-round" :src="item.avatar" mode="aspectFill" />
                            </div>
                            <div class="info">
                                <div class="name text-huge" style="font-size: 28rpx;">{{item.nickname}}</div>
                                <div class="rank grey-color text-small">第{{index + 1}}名</div>
                            </div>
                        </div>
                        <div class="count text-huge color-red" style="font-size: 26rpx;">¥{{item.score}}</div>
                    </div>
                </div>
                <ListEmpty v-else />

            </template>
            <!-- 选择门店 -->
            <template v-if="selectThisItem == 'selectMendian'">
                <!-- 搜索门店 -->
                <div class="searchBox_mendian">
                    <div style="z-index:0;">
                        <!-- locksearchmendian -->
                        <van-search v-model="search" placeholder="商家名称" />
                    </div>
                    <!-- 解锁门店结果 -->
                    <div class="searcResultBox" v-show="searchBoxState && showSelect">
                            <template v-if="searchNameList">
                                <div class="searcResultBox_item" v-for="(searItem,searIndex) in searchNameList" :key="searIndex" @click="onSelectunlockMendianName(searItem.name)">{{searItem.name}}</div>
                            </template>
                            <template v-else>
                                <div class="mall-index__empty">暂无内容</div>
                            </template>
                        </div>
                </div>

                <div style="width:98%;">
                    <div class="date-select-box">
                        <ZbSelect v-model="lockSelectedDateType" type="mini" :options="lockdateTypeOptions" :hasBr="true" default-br="#101010" default-color="#101010" selected-color="#FFFFFF" selected-br="#f4051a" selected-bg="#f4051a" />
                        <span class="pickerSelect">
                            <wx-picker :value="lockdataIndex" :range="lockdataArray" @change="lockonStartDateChange">
                                <div class="picker-border-box fl">
                                    {{lockdataArray[lockselectActive]}}
                                </div>
                            </wx-picker>
                        </span>
                    </div>
                </div>
                <block v-if="unlocksearchNameList.length">
                    <block v-for="(item, index) in unlocksearchNameList" :key="index" >
                        <div class="rank-item text-huge position-relative after-line">
                            <div class="info">
                                <div class="avatar">
                                    <img :src="item.avatar" v-if="item.avatar" mode="aspectFill" />
                                    <img class="border-round" v-else src="/static/images/default_avatar.png" mode="aspectFill" />
                                </div>
                                <div class="good-info">
                                    <div class="name">{{item.nickname ? item.nickname : '用户未授权'}}</div>
                                    <div class="rank grey-color small-text">第{{index + 1}}名</div>
                                    <!-- <div class="rank blue-color small-text">{{item.shop_name}}</div> -->
                                </div>
                            </div>
                            <div class="price red-color">{{currency(item.score)*100 + '元'}}</div>
                        </div>
                    </block>
                </block>
                <ListEmpty v-else />
            </template>


        </div>

        <!-- 解锁说明 -->
        <DescPop v-if="descPopVisible" @close="hideDescPop"></DescPop>

        <BottomTab value="member" />
    </div>
</template>

<script lang="ts">
import store from '@/store';
import { api } from '@/lib/api';
import { getYear, dateNow } from '@/lib/utils';
import {
    currency,
    dateChinaFormat,
} from '@/lib/utils';
import {
    EMPTY_LIST,
    ROUTE_NAME,
    STATUS_LOGIN_LOGINED,
} from '@/lib/constant';
import CommonNav from '@/components/nav/commonNav.vue';
import DescPop from '@/components/popup/descPop.vue';
import ZbSelect from '@/components/common/zbSelect.vue';
import ListEmpty from '@/components/list/listEmpty.vue';
import BottomTab from '@/components/nav/bottomTab.vue';
import { Component, Vue, Watch } from 'vue-property-decorator';
import { Route } from 'vue-router';

Component.registerHooks([
    'beforeRouteEnter',
]);

@Component({
    name: 'MemberIndex',
    components: {
        CommonNav,
        DescPop,
        ListEmpty,
        ZbSelect,
        BottomTab,
    },
    methods: {
        currency,
    },
})

export default class MemberIndex extends Vue {

    // 选择年份
    public dataArray: string[] = [ '选择年份', '2019', '2020' ];
    public selectActive: number = 0;
    public selectedThis: string = '';
    public showSelect = false;

    public onStartDateChange(picker: any) {
        this.selectActive = picker.target.value;
        this.selectedThis = this.dataArray[picker.detail.value];
        this.getRankList(true);
    }


    public navs: ValueText1[] = [
        { text1: '解锁排行', value: 'unlock' },
        { text1: '邀请排行', value: 'visitor' },
    ];

    public lockNavs: ValueText1[] = [
        { text1: '返利明细', value: 'rebateList' },
        { text1: '解锁明细', value: 'unlockList' },
    ];

    public levelList: string[] = [ '会员', '返利会员', '城市合伙人', '商家职员' ];

    public nav: any = 'unlock';
    public lockNav: any = 'rebateList';
    public rankNav: any = '';
    public selectedDateType: string = '季度';
    public dateTypeOptions: string[] = [ '季度', '年度','往年统计' ];

    public dataTypeMap: any = {
        季度: 'quarterly',
        年度: 'annual',
        往年统计: 'previous',
    };
// 解锁排行榜 选择切换
    public lockrankNav: any = '';
    public lockSelectedDateType: string = '季度';
    public lockdateTypeOptions: string[] = [ '季度', '年度','往年统计' ];

    public lockdataTypeMap: any = {
        季度: 'quarterly',
        年度: 'annual',
        往年统计: 'previous'
    };
    // 解锁排行-搜索门店
    public locksearchmendian: any = ''

    // 解锁排行榜选择年份
    public lockdataArray: string[] = [ '选择年份', '2019', '2020' ];
    public lockselectActive: number = 0;
    public lockselectedThis: string = '';
    public lockshowSelect = false;




    public isLogin = true;
    public descPopVisible = false;
    public key: any = 'undefined_undefined_undefined_undefined_undefined';
    public rebateUnLockKey: any = 'undefined_undefined_undefined_true';

    public tabs_item_active = 'init';

    public selectThisItem: any = 'unlockWrap';

    // 选择门店
    public search = '';
    public searchName = '';
    public searchBoxState = false;

    public changeTabsItem(_item){
        this.tabs_item_active = _item;
    }
    // 获取搜索门店结果
    public get searchNameList(){
        return store.state.partner.searchNameList;
    }


    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }
    public get hasLogin() {
        return store.state.auth.hasLogin;
    }
    /** 客服信息 */
    public get service() {
        return store.state.utils.service;
    }
    public get account() {
        return store.state.user.account;
    }
    public get unlock() {
        return store.state.user.unlock;
    }
    public get lock() {
        return store.state.user.lock;
    }
    public get invitationStat() {
        return store.state.user.invitationStat;
    }
    public get visitorList() {
        return store.state.user.visitorList;
    }
    public get unlockWrap(): ListWrap<User.UnlockRankItem> & ListReq {
        return store.state.user.unlockList || EMPTY_LIST;
    }
    public get unlocksearchMendianWrap(): ListWrap<User.unlockSeachNameLst> & ListReq {
        return store.state.user.unlockSearchNameList || EMPTY_LIST;
    }
    // unlockDetailListMap: state => state.unlockDetailListMap,
    public get rebateDetailListMap() {
        return store.state.user.rebateDetailListMap;
    }
    public get memberShopList() {
        return store.state.user.memberShopList;
    }
    public get rankListMap() {
        return store.state.partner.rankListMap;
    }
    public get rankNavs() {
        return store.state.user.rankingList.map((item) => {
            return { value: item, text1: item };
        });
    }
    public get isCountRank() {
        const map: { [key: string]: boolean } = {
            // 单量排行: true,
            // 婚纱摄影: true,
            // 结婚首饰: true,
            选择门店:true
        };
        return map[this.rankNav];
    }
    public get rankKey() {
        return `${this.dataTypeMap[this.selectedDateType]}_${this.rankNav}`;
    }
    public get rankSelf() {
        return this.rankListMap[this.rankKey] ? this.rankListMap[this.rankKey].self || null : null;
    }
    public get rankSelfFormat() {
        return this.rankSelf ? Object.assign(JSON.parse(JSON.stringify(this.rankSelf)), {
            score: currency(this.rankSelf.score),
        }) : null;
    }
    public get rankList() {
        return this.rankListMap[this.rankKey] ? this.rankListMap[this.rankKey].rank.map((item: any) => {
            const val = JSON.parse(JSON.stringify(item));
            return Object.assign(val, {
                rebate: currency(val.score),
            });
        }) : [];
    }

    // 排行切换-新增
    public get lockrankKey() {
        return `${this.lockdataTypeMap[this.lockSelectedDateType]}`;
    }
    public get lockrankList() {
        return this.rankListMap[this.lockrankKey] ? this.rankListMap[this.lockrankKey].rank.map((item: any) => {
            const val = JSON.parse(JSON.stringify(item));
            return Object.assign(val, {
                rebate: currency(val.score),
            });
        }) : [];
    }

    public get rebateDetailList() {
        return this.rebateDetailListMap[this.key] ? this.rebateDetailListMap[this.key] : null;
    }
    public get rebateUnlockDetailList() {
        return this.rebateDetailListMap[this.rebateUnLockKey] ? this.rebateDetailListMap[this.rebateUnLockKey] : null;
    }
    // unlockDetailList() {
    //     return this.unlockDetailListMap[this.key] ? this.unlockDetailListMap[this.key] : null;
    // },
    public get unlockCurrency() {
        if (!this.unlock) {
            return 0;
        }
        return this.unlock > 1000000
            ? currency(this.unlock / 10000)
            : currency(this.unlock);
    }
    public get lockCurrency() {
        if (!this.lock) {
            return 0;
        }
        return this.lock > 1000000
            ? currency(this.lock / 10000)
            : currency(this.lock);
    }
    public get accountCurrency() {
        return this.account ? (this.account > 1000000 ? currency(this.account / 10000) : currency(this.account)) : 0;
        // return this.account ? currency(this.account) : 0;
    }
    // unlockDetailListCurrency() {
    //     return this.unlockDetailList && this.unlockDetailList.list.length ? this.unlockDetailList.list.slice(0, 2).map(item => Object.assign(
    //         JSON.parse(JSON.stringify(item)), {
    //             money: currency(item.money),
    //         }
    //     )) : [];
    // },
    public get rebateDetailListCurrency() {
        return this.rebateDetailList && this.rebateDetailList.list ? this.rebateDetailList.list.slice(0, 2).map((item) => {
            return {
                ...item,
                money: currency(item.money),
                create_at: dateChinaFormat(item.created_at, 'm-d H-i'),
            };
        }) : [];
    }
    public get rebateUnlockDetailListCurrency() {
        return this.rebateUnlockDetailList && this.rebateUnlockDetailList.list ? this.rebateUnlockDetailList.list.slice(0, 2).map((item: any) => Object.assign(
            JSON.parse(JSON.stringify(item)), {
                money: currency(item.money),
                create_at: dateChinaFormat(item.create_at, 'm-d H-i'),
            }
        )) : [];
    }
    public get unlockListCurrency() {
        return this.unlockWrap && this.unlockWrap.list ? this.unlockWrap.list.map((item: any) => Object.assign(
            JSON.parse(JSON.stringify(item)), {
                score: currency(item.score),
            }
        )) : [];
    }
    // 搜索门店-解锁排行
    public get unlocksearchNameList() {
        return this.unlocksearchMendianWrap && this.unlocksearchMendianWrap.list ? this.unlocksearchMendianWrap.list.map((item: any) => Object.assign(
            JSON.parse(JSON.stringify(item)), {
                score: currency(item.score),
            }
        )) : [];
    }

    // 返利会员 切换
    public checkedRank(e: any){
        this.selectThisItem = e;
        this.lockselectActive = 0;
        this.lockselectedThis = '';
        this.lockSelectedDateType = '季度';
        this.locksearchmendian = '';

        if(this.selectThisItem == 'unlockWrap'){
            this.getUnlockList(true,false);
        }
        if(this.selectThisItem == 'selectMendian'){
            this.unlockSearchMendian(true,false)
        }
    }



    @Watch('lockNav')
    public onLockNavChange(val: any) {
        if (val === 'rebateList') {
            store.dispatch('user/getRebateDetailList', {
                offset: 0,
                count: 10,
                forceUpdate: true,
            });
        } else {
            store.dispatch('user/getRebateDetailList', {
                offset: 0,
                count: 10,
                isUnlock: true,
                forceUpdate: true,
            });
        }
    }

    @Watch('rankNav')
    public onRankNavChange() {
        this.selectActive = 0;
        this.selectedThis = '';
        this.searchName = '';
        this.showSelect = false;
        this.getRankList(true);
    }
    @Watch('search')
    public onRankSearchChange() {
        if(!this.isSearchMendian){
            this.searchBoxState = true;
            this.showSelect = true;
            this.searchMendian(true);
        }else{
            this.searchBoxState = false;
            this.showSelect = false;
        }
        if(!this.search){
            this.searchBoxState = false;
            this.showSelect = false;
            this.isSearchMendian = false;
        }
        // this.getRankList(true);
    }

    // 解锁排行-搜索门店
    @Watch('locksearchmendian')
    public onlockSearchChange(){
        this.lockselectActive = 0;
        this.lockselectedThis = '';
        this.lockSelectedDateType = '季度';
        this.unlockSearchMendian(true,false)
    }

    @Watch('selectedDateType')
    public onSelectedDateTypeChange() {
        // 选择年份初始值
        this.selectActive = 0;
        this.selectedThis = '';
        this.searchName = '';
        this.search = '';
        this.showSelect = false;
        this.getRankList(true);
    }
    // 排行榜 切换分类
    @Watch('lockSelectedDateType')
    public onrankSelectedDateTypeChange() {
        // 清空搜索商家名称
        this.search = '';
        this.searchName = '';
        this.lockselectActive = 0;
        this.lockselectedThis = '';
        // 需要新写获取解锁排行的请求方法-原方法无分类参数
        // this.getUnlockList(true,false);
        if(this.selectThisItem == 'unlockWrap'){
            this.getUnlockList(true,false);
        }
        if(this.selectThisItem == 'selectMendian'){
            this.unlockSearchMendian(true,false)
        }
    }


    //
    // 搜索门店
    public async searchMendian(forceUpdate: any){
        await store.dispatch('partner/getSearchNamem', {
            searchName:this.search,
        });
    }
    // 点击某个门店
    public onSelectMendianName(_name){
        this.search = _name;
        this.searchName = _name;
        this.getRankList(true);
        this.searchBoxState = false;
        this.showSelect = false;
    }


    public async getRankList(forceUpdate: any) {
        await store.dispatch('partner/getRankList', {
            offset: forceUpdate ? 0 : this.rankList.length,
            count: 10,
            levelName: this.userBasicInfo.level === 2 ? 'partner' : '',
            interval: this.dataTypeMap[this.selectedDateType],
            type: this.rankNav,
            shop_name:this.searchName,
            year:this.selectedThis == '选择年份'?'':this.selectedThis, //搜索年份
            forceUpdate,
        });

        this.showSelect = false;
    }

    // 解锁排行榜  quarterly
    public async getUnlockList(forceUpdate: any,switchState){
        await store.dispatch('user/getUnlockList', {
            interval:this.lockdataTypeMap[this.lockSelectedDateType],
            year:this.lockselectedThis == '选择年份'?'':this.lockselectedThis, //搜索年份
            offset: switchState?this.unlockWrap.list.length:0,
            count: 20,
            forceUpdate,
        });

    }

    // 解锁排行榜-选择年份
    public lockonStartDateChange(picker: any) {
        this.lockselectActive = picker.target.value;
        this.lockselectedThis = this.lockdataArray[picker.detail.value];
        // this.getUnlockList(true,false);
        if(this.selectThisItem == 'unlockWrap'){
            this.getUnlockList(true,false);
        }
        if(this.selectThisItem == 'selectMendian'){
            this.unlockSearchMendian(true,false)
        }
    }

    // 解锁排行-门店搜索
    public async unlockSearchMendian(forceUpdate: any, switchState){
        await store.dispatch('user/getunlockSearchNameList', {
            interval:this.lockdataTypeMap[this.lockSelectedDateType],
            year:this.lockselectedThis == '选择年份'?'':this.lockselectedThis, //搜索年份
            offset: switchState?this.unlocksearchMendianWrap.list.length:0,
            searchName:this.searchName,
            count: 20,
            forceUpdate,
        });

    }

public isSearchMendian: boolean = false;
    // 解锁排行-点击某个门店
    public onSelectunlockMendianName(_name){
        this.search = _name;
        this.isSearchMendian = true;
        this.searchName = _name;
        this.unlockSearchMendian(true,false);
        this.searchBoxState = false;
        this.showSelect = false;
    }


    /** 登录 */
    public onClickLogin() {
        const basicInfo = this.userBasicInfo;
        if (basicInfo && (!basicInfo.nickname || !basicInfo.avatar)) {
            store.commit('auth/showUserInfo', true);
            return;
        }
        if (basicInfo && !basicInfo.mobile) {
            store.commit('auth/showBindMobile', true);
        }
    }

    public showUnlockDesc() {
        this.descPopVisible = true;
    }

    public hideDescPop() {
        this.descPopVisible = false;
    }

    /**
     * 点击申请成为合伙人
     */
    public onClickPartner() {
        // wx.navigateTo({
        //     url: '/pages/partner_detail/main',
        // });
        api.push({
            name: ROUTE_NAME.PARTNER_DETAIL,
        });
    }

    /**
     * 点击添加邀请记录
     */
    public onClickAddInviteRecord() {
        // wx.navigateTo({
        //     url: '/pages/partner_invite_record/main',
        // });

        api.push({
            name: ROUTE_NAME.PARTNER_INVITE_RECORD,
        });
    }

    public toPoster() {
        // wx.navigateTo({
        //     url: '/pages/share_poster/main',
        // });

        api.push({
            name: ROUTE_NAME.MEMBER_SHARE_POSTER,
        });
    }

    public toMyTeam() {
        // wx.navigateTo({
        //     url: '/pages/partner_team/main',
        // });

        api.push({
            name: ROUTE_NAME.PARTNER_TEAM,
        });
    }

    public toService() {
        // wx.navigateTo({
        //     url: '/pages/wechat_service/main',
        // });
        api.push({
            name: ROUTE_NAME.USER_WECHAT_SERVICE,
        });
    }

    public onClickRecommendOrder() {
        // wx.navigateTo({
        //     url: `/pages/recommend_order/main?referrer_id=${this.userBasicInfo.id}`,
        // });
        api.push({
            name: ROUTE_NAME.MEMBER_RECOMMEND_ORDER,
            query: {
                referrer: this.userBasicInfo.id + '',
            },
        });
    }

    /**
     * 点击我的账户
     */
    public onClickUserAccount() {
        // wx.navigateTo({
        //     url: '/pages/user_account/main',
        // });

        api.push({
            name: ROUTE_NAME.USER_ACCOUNT,
        });
    }

    public toUserInvite() {
        // wx.navigateTo({
        //     url: '/pages/user_invite/main',
        // });

        api.push({
            name: ROUTE_NAME.USER_INVITE,
        });
    }

    public toPartnerLockRecord() {
        // wx.navigateTo({
        //     url: '/pages/partner_lock_record/main',
        // });

        api.push({
            name: ROUTE_NAME.PARTNER_LOCK_RECORD,
        });
    }

    public toLockDeail() {
        // wx.navigateTo({
        //     url: '/pages/partner_lock_detail/main',
        // });

        api.push({
            name: ROUTE_NAME.PARTNER_LOCK_DETAIL,
        });
    }
    /**
     * 点击功能
     */
    public onClickFeature(feature) {
        if (feature === 'complaint') {
            // api.navigateTo({
            //     url: '/pages/feedback_complaint/main',
            // });
            api.push({
                name: ROUTE_NAME.FEEDBACK_COMPLAINT,
            });
        } else if (feature === 'rebate') {
            api.push({
                name: ROUTE_NAME.MEMBER_REBATE_DETAIL,
            });
        }
    }
    // 在线管理
    public onClickManage(manage){
        // api.push({
        //     name: ROUTE_NAME.PLATFORM_MANAGE,
        // });
        const user = this.userBasicInfo;
        const identity = user.employee_identity;
        if (identity && identity === '商家职员' && user.is_palm_management == 1) {
            api.push({
                name: ROUTE_NAME.STAFF_MANAGE,
            });
            return;
        }
        if (identity && identity === '商家管理' && user.is_palm_management == 1) {
            api.push({
                name: ROUTE_NAME.MERCHANT_MANAGE,
            });
            return;
        }
        if (identity && identity === '平台管理' && user.is_palm_management == 1) {
            api.push({
                name: ROUTE_NAME.PLATFORM_MANAGE,
            });
            return;
        }
        wx.showToast({
            title: '请联系商家申请权限',
            icon: 'none',
        });

    }

    // 消费记录
    public onClickConsume(manage){
        api.push({
            name: ROUTE_NAME.MEMBER_CONSUME_LIST
        })
    }
    // 充值余额
    public onClickRecharge(manage){
        api.push({
            name:ROUTE_NAME.MEMBER_RECHARGE_LIST
        })
    }
    // 充值记录
    public onClickRechargeRecord(manage){
        api.push({
            name:ROUTE_NAME.MEMBER_RECHARGERECORE_LIST
        })
    }

    async onPullDownRefresh() {
        store.commit('utils/startPulldown');
        await store.dispatch('user/getBasicInfo', true);
        if (this.userBasicInfo.level === 1) {
            await Promise.all([
                store.dispatch('user/getRebateDetailList', {
                    offset: 0,
                    count: 10,
                    forceUpdate: true,
                }),
                store.dispatch('user/getMemberShopList'),
                // 获取解锁排行榜
                store.dispatch('user/getUnlockList', {
                    // 新增
                    interval:'quarterly',
                    year:'', //搜索年份

                    offset: 0,
                    count: 20,
                    forceUpdate: true,
                }),
                // 解锁排行-搜索门店
                store.dispatch('user/getunlockSearchNameList', {
                    // 新增
                    interval:'quarterly',
                    year:'', //搜索年份
                    searchName:'',

                    offset: 0,
                    count: 20,
                    forceUpdate: true,
                }),
                store.dispatch('user/getUnlock'),
                store.dispatch('user/getAccount'),
                store.dispatch('user/getInvitationStat'),
            ]);
        } else if (this.userBasicInfo.level === 2) {
            await Promise.all([
                store.dispatch('user/getRebateDetailList', {
                    offset: 0,
                    count: 10,
                    forceUpdate: true,
                }),
                store.dispatch('user/getRebateDetailList', {
                    offset: 0,
                    count: 10,
                    isUnlock: true,
                    forceUpdate: true,
                }),
                store.dispatch('user/getAccount'),
                store.dispatch('user/getUnlock'),
                // 解锁排行
                store.dispatch('user/getUnlockList', {
                    // 新增
                    interval:'quarterly',
                    year:'', //搜索年份

                    offset: 0,
                    count: 10,
                    forceUpdate: true,
                }),
                // 解锁排行-搜索门店
                store.dispatch('user/getunlockSearchNameList', {
                    // 新增
                    interval:'quarterly',
                    year:'', //搜索年份
                    searchName:'',

                    offset: 0,
                    count: 20,
                    forceUpdate: true,
                }),
                store.dispatch('user/getInvitationStat'),
                store.dispatch('user/getRankingList', {
                    type: 'partner',
                }),
            ]);
        } else if (this.userBasicInfo.level === 3) {
            await Promise.all([
                store.dispatch('user/getRebateDetailList', {
                    offset: 0,
                    count: 10,
                    forceUpdate: true,
                }),
                store.dispatch('user/getAccount'),
                store.dispatch('user/getInvitationStat'),
                store.dispatch('user/getRankingList', {
                    type: 'staff',
                }),
            ]);
        }
        store.commit('utils/endPulldown');
    }
    /**
     * 上拉加载
     */
    async onReachBottom() {
        const level = this.userBasicInfo.level;
        if (level === 1 || level === 2) {
            // selectThisItem == 'unlockWrap'
            if(this.selectThisItem == 'unlockWrap'){
                store.dispatch('user/getUnlockList', {
                    // 新增
                    interval:this.lockdataTypeMap[this.lockSelectedDateType],
                    year:this.selectedThis == '选择年份'?'':this.selectedThis, //搜索年份

                    offset: this.unlockWrap.list.length,
                    count: 10,
                });
            }

            if(this.selectThisItem == 'selectMendian'){
                // 解锁排行-搜索门店
                store.dispatch('user/getunlockSearchNameList', {
                    // 新增
                    interval:this.lockdataTypeMap[this.lockSelectedDateType],
                    year:this.selectedThis == '选择年份'?'':this.selectedThis, //搜索年份
                    searchName:this.searchName,

                    offset: this.unlocksearchMendianWrap.list.length,
                    count: 20
                });
            }

        }
        // } else if (level === 3 || level === 2) {
        //     this.getRankList();
        // }
        if (level === 3 || level === 2) {
            this.getRankList(false);
        }
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        store.commit('utils/startRequest');
        await store.dispatch('user/getBasicInfo', true);
        const userBasicInfo = store.state.user.basicInfo;
        const reqArr = [
            store.dispatch('user/getVisitorList', {
                offset: 0,
                count: 10,
                forceUpdate: true,
            }),
            store.dispatch('utils/getPageConfig'),
        ];
        if (userBasicInfo.level === 1) {
            reqArr.push(...[
                store.dispatch('user/getRebateDetailList', {
                    offset: 0,
                    count: 10,
                    forceUpdate: true,
                }),
                store.dispatch('user/getMemberShopList'),
                // 解锁排行
                store.dispatch('user/getUnlockList', {
                    // 新增
                    interval:'quarterly',
                    year:'', //搜索年份

                    offset: 0,
                    count: 20,
                    forceUpdate: true,
                }),
                // 解锁排行-搜索门店
                store.dispatch('user/getunlockSearchNameList', {
                    // 新增
                    interval:'quarterly',
                    year:'', //搜索年份
                    searchName: '',

                    offset: 0,
                    count: 20,
                    forceUpdate: true,
                }),


                store.dispatch('user/getUnlock'),
                store.dispatch('user/getAccount'),
                store.dispatch('user/getInvitationStat'),
            ]);
        } else if (userBasicInfo.level === 2) {
            reqArr.push(...[
                store.dispatch('user/getRebateDetailList', {
                    offset: 0,
                    count: 10,
                    forceUpdate: true,
                }),
                store.dispatch('user/getRebateDetailList', {
                    offset: 0,
                    count: 10,
                    isUnlock: true,
                    forceUpdate: true,
                }),
                store.dispatch('user/getAccount'),
                store.dispatch('user/getUnlock'),
                // 解锁排行
                store.dispatch('user/getUnlockList', {
                    // 新增
                    interval:'quarterly',
                    year:'', //搜索年份

                    offset: 0,
                    count: 10,
                    forceUpdate: true,
                }),
                // 解锁排行-搜索门店
                store.dispatch('user/getunlockSearchNameList', {
                    // 新增
                    interval:'quarterly',
                    year:'', //搜索年份
                    searchName: '',

                    offset: 0,
                    count: 20,
                    forceUpdate: true,
                }),
                store.dispatch('user/getInvitationStat'),
                store.dispatch('user/getRankingList', {
                    type: 'partner',
                }),
            ]);
        } else if (userBasicInfo.level === 3) {
            reqArr.push(...[
                store.dispatch('user/getRebateDetailList', {
                    offset: 0,
                    count: 10,
                    forceUpdate: true,
                }),
                store.dispatch('user/getAccount'),
                store.dispatch('user/getInvitationStat'),
                store.dispatch('user/getRankingList', {
                    type: 'staff',
                }),
            ]);
        }
        await Promise.all(reqArr);
        store.commit('utils/endRequest');

        next();
    }
    public created() {
        let start = 2019;
        let data = new Date();
        let end = data.getFullYear();
        let nowList = ['选择年份'];
        for(let i = start; i< end;i++){
            nowList.push(i.toString())
        }
        this.dataArray = nowList;
        this.lockdataArray = nowList;


        if (this.rankNavs && this.rankNavs.length) {
            this.rankNav = this.rankNavs[0].value;
        }
        window.addEventListener('reachbottom', this.onReachBottom);
        window.addEventListener('pulldownrefresh', this.onPullDownRefresh);
        window.onShareAppMessage = (data) => {
            // return {
            //     title: '',
            //     imageUrl: '',
            //     path: `pages/index/main?referrer_id=${this.userBasicInfo.id}&code=${this.userBasicInfo.invite_code}`,
            // };

            const url = this.$router.resolve({
                name: ROUTE_NAME.MALL_INDEX,
                query: {
                    referrer: this.userBasicInfo.id + '',
                    code: this.userBasicInfo.invite_code,
                },
            }).route.fullPath;

            return {
                title: '',
                imageUrl: '',
                // path: `/pages/index/main?referrer_id=${this.userBasicInfo.id}`,
                miniprogramPath: `/pages/main/index?type=share&targeturl=${encodeURIComponent(url)}`, // 如果需要分享原始小程序页面路由，可传递此参数
            };
        }
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
        window.removeEventListener('pulldownrefresh', this.onPullDownRefresh);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.selecItemThisBox{
    display: flex;
    justify-content: space-around;
}
.selecItemThis{
    display: inline-block;
    padding: 18rpx 0;
}
.selecItemThis_bottom_red{
    border-bottom: 8rpx solid #f04848;
}

.pickerSelect{
    padding: 12rpx 10rpx;
    font-size: 28rpx;
    line-height: 18rpx;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid#101010;
    color: #101010;
    border-radius: 10rpx;
    margin-right: 20rpx;
}

.good-info{
    font-size: 28rpx;
}
.price{
    font-size: 26rpx;
}

.date-select-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
}
// 搜索门店
.searchBox_mendian{
    position: relative;
    width: 100%;

    .searcResultBox{
        position: absolute;
        top: 55px;
        left: 4%;
        width: 92%;
        height: 666rpx;
        background-color: #ffffff;
        box-shadow: 4rpx 4rpx 4rpx #b3b3b3;
        border-radius: 10rpx;
        padding: 20rpx 10rpx;
        box-sizing: border-box;
        overflow: hidden;
        overflow-y: scroll;
        z-index: 1;
        .searcResultBox_item{
            width: 100%;
            height: 40rpx;
            line-height: 40rpx;
            border-bottom: 1rpx solid #ccc;
            color: #676767;
            padding: 25rpx;
        }

    }
}

.text_color_black{
    color: #000;
}
.box_bg_white{
    background-color: #ffffff!important;
}
.box_bg_gray{
    background-color: #F2F2F2!important;
}
.padding_left_15{
    padding-left: 18px;
}
.padding_left_30{
    padding-left: 30px;
}
.text_overflow{
    overflow: hidden;
}
.border_top_pink{
    border-top: 1rpx solid #f3a9a3;
}
.border_botom_pink{
    border-botom: 1rpx solid #f3a9a3;
}
.border_right_gray{
    border-right: 2px solid #F2F2F2;
}
.item_text_large{
    font-size: 12px;
}
.item_text_small{
    font-size: 8px;
}
.icon_img{
    width: 18px;
    margin-bottom: 3px;
}
.box_sizing{
    box-sizing: border-box;
}
.tab_item_no{
    color: #CD1927;
}
.tab_item_active{
    color: #F3051A!important;
    font-size: 13px!important;
}
//
.my_tabs{
    width: 100%;
    // box-sizing: border-box;
    border-radius: 5px;
    background-color: #f8f8f8;
    // background-color: #ffffff;
    // width: 92%;
    // margin: 10px auto;
    padding:10px 0px;
    margin-top:10px;

    .item {
        display: inline-block;
        width: 19%;
        // margin: 10px 0;
        margin: 5px 0;

        text-align: center;
        .money{
            height: 60rpx;
            line-height: 55rpx;
        }
        .text{
            font-size: 12px;
            font-weight: 400;
        }
        .icon {
            font-size: 24px;
            margin-bottom: 10px;
            color: @color-red;
        }
    }
    .item_3 {
        display: inline-block;
        width: 33%;
        // margin: 10px 0;
        margin: 5px 0;
        text-align: center;
        .item_text_large{
            font-size: 14px;
        }
        .item_text_small{
            font-size: 10px;
        }
        .text{
            font-size: 12px;
        }
        .icon {
            font-size: 24px;
            margin-bottom: 10px;
            color: @color-red;
        }
    }
}
// 有边距
.my_tabs2{
    width: 92%;
    // box-sizing: border-box;
    border-radius: 5px;
    // background-color: #f8f8f8;
    // background-color: #ffffff;
    margin: 10px auto;
    padding:10px 0px;

    .item {
        display: inline-block;
        width: 19%;
        // margin: 10px 0;
        margin: 5px 0;

        text-align: center;
        .text{
            font-size: 14px;
        }
        .icon {
            font-size: 24px;
            margin-bottom: 10px;
            color: @color-red;
        }
    }
    .item_3 {
        display: inline-block;
        width: 32%;
        // margin: 10px 0;
        margin: 5px 0;
        text-align: center;
        .money{
            height:60rpx;
            line-height: 60rpx;
        }
        .item_text_large{
            font-size: 14px;
        }
        .item_text_small{
            font-size: 10px;
        }
        .text{
            font-size: 12px;
        }
        .icon {
            font-size: 24px;
            margin-bottom: 10px;
            color: @color-red;
        }
    }
}

.rank2_box{
    // 新增
    background-color: #fff;
    width: 92%;
    margin-left: 4%;
    border-radius: 15rpx;
    margin-top: 20rpx;
// 新增-解锁排行-门店
    .rank-item {
        position: relative;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 14px;
        &:not(:last-child) {
            border-bottom: 1px solid #ebebeb;
        }
        .info {
            display: flex;
            align-items: center;
        }
        .avatar {
            width: 45px;
            height: 45px;
            margin-right: 10px;
            image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
    }

}
.page-member-index {
    min-height: 100%;
    padding-bottom: @height-tabbar;
    background-color: @color-white;
    box-sizing: border-box;
    overflow-x: hidden;

    .header-wrap {
        position: relative;

        .bg {
            position: absolute;
            width: 848px;
            height: 232px;
            padding-left: 259px;
            padding-bottom: 30px;
            margin-left: -236px;
            margin-top: -120px;
            // left: 50%;
            // background-color: @color-black;
            background-color: #FFBFC3;//#FEBDC2;
            border-radius: 0 0 50% 50%;
            z-index: 0;
            box-sizing: border-box;
            // transform: translate(-50%, -50%);
        }
        .header {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            height: 116px;
            z-index: 1;

            .inner {
                display: flex;
                justify-content: space-between;
                width: 330px;
            }
            .left {
                display: flex;
            }
            .info {
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            .user-info {
                width: 135px;
            }
            .unlock {
                // margin-left: 20px;
                .text-banner {
                    line-height: 39px;
                }
            }
            .avatar {
                width: 60px;
                height: 60px;
                margin-right: 20px;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .aligin-cneter {
                align-items: center;
            }
        }
    }

    .banner {
        padding: 6px 15px 0;
        .visitor {
            padding: 12px 0;
            margin: 0px 0px 5px 0px;
            box-sizing: border-box;
            text-align: center;
            background-color: #f8f8f8;
            border-radius: 5px;
            color: @color-red;
            .number {
                padding: 0;
                line-height: 42px;
                font-size: 30px;
                font-weight: bold;
            }
            .tips {
                font-size: 14px;
                .icon {
                    font-size: 16px;
                    font-weight: 800;
                    vertical-align: middle;
                }
            }
        }
        .account-detail {
            background-color:#ffffff;
            // background-color: #f8f8f8;
            border-radius: 5px;

            .title {
                padding: 10px;
            }
            .item {
                display: flex;
                justify-content: space-between;
                // align-items: center;
                padding: 10px;
                &:not(:last-child) {
                    border-bottom: 1px solid #ebebeb;
                }
                .inner-box {
                    display: flex;
                    align-items: center;
                }
                .avatar {
                    width: 45px;
                    height: 45px;
                    margin-right: 10px;
                }
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .tabs {
        box-sizing: border-box;
        padding: 10px 15px;
        // 新增
        background-color: #fff;
        width: 92%;
        margin-left: 4%;
        border-radius: 10rpx;
        margin-top: 20rpx;
        .item {
            display: inline-block;
            width: 25%;
            margin: 10px 0;
            text-align: center;
            .icon {
                font-size: 24px;
                margin-bottom: 10px;
                color: @color-red;
            }
        }
    }

    .rank-box {

        .title {
            padding: 5px 25px;
        }
        .tabs-box {
            position: relative;
            .common-nav {
                background-color: #f8f8f8;
                .nav-item {
                    border-bottom: 3px solid transparent;
                }
                &.red .active {
                    border-bottom: 3px solid #F13C50;
                }
            }
            .common-nav .nav-item .label {
                font-size: 17px;
                line-height: 20px;
            }
        }
        .list {
            padding: 0 10px;
            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                &:not(:last-child) {
                    border-bottom: 1px solid #ebebeb;
                }
                .inner-box {
                    display: flex;
                    align-items: center;
                }
                .avatar {
                    width: 45px;
                    height: 45px;
                    margin-right: 10px;
                }
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }

    }
    .btn-wrap {
        box-sizing: border-box;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 15px 15px 5px;
        // background: #fff;
        z-index: 2;
    }
    .shop-list {
        .inner {
            padding: 0 10px;
            // background-color: #f8f8f8;
            overflow: hidden;
            div {
                margin: 6px 0;
            }
        }
    }
    .staff-rank-wrap {
        // 新增
        background-color: #fff;
        width: 92%;
        margin-left: 4%;
        border-radius: 15rpx;
        margin-top: 20rpx;
        padding-top: 20rpx;
        .rank-box {
            width: 346px;
            margin: 18px auto 0;
            border-radius: 5px;
            // background-color: #f8f8f8;
            .common-nav {
                background: transparent;
                .nav-item {
                    border-bottom: 3px solid transparent;
                }
                &.red .active {
                    border-bottom: 3px solid #F13C50;
                }
            }
            .border-bottom {
                border-bottom: 1px solid #ebebeb;
            }
            .date-select-box {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin-top: 10px;

            }
            .rank-item {
                position: relative;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                padding: 14px;
                &:not(:last-child) {
                    border-bottom: 1px solid #ebebeb;
                }
                .info {
                    display: flex;
                    align-items: center;
                }
                .avatar {
                    width: 45px;
                    height: 45px;
                    margin-right: 10px;
                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
            }
            .name {
                width: 190px;
            }
        }
    }
    .rebate-box {
        // background-color: #f8f8f8;
        // 新增
        background-color: #fff;
        width: 92%;
        margin-left: 4%;
        border-radius: 15rpx;
        margin-top: 20rpx;

        .title {
            padding: 9px 0;
        }
        .border-bottom {
            border-bottom: 1px solid #ebebeb;
        }
    }
    .mr-top-60 {
        margin-top: 60px;
    }
    .red-border-bottom {
        display: inline-block;
        padding: 9px 0;
        border-bottom: 4px solid #F04848;
        margin-left: 57px;
    }
}

</style>
